<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
  const nums = [10, 20, 111, 222, 444, 40, 50];
  // 从数组中筛选出小于100的数放入新数组

  // filter函数的使用
  // filter中的回调函数必须返回一个boolean值，返回true：函数内部会自动将这次回调的n放入新的数组中，返回false：函数内部会过滤掉这次的n
  let newNums1 = nums.filter(function (n) {
    return n < 100;
  });
  console.log("newNums1", newNums1); // [10, 20, 40, 50]

  // 将数组中小于100的数乘以2放入新数组

  // map函数的使用
  let newNums2 = newNums1.map(function (n) {
    return n * 2;
  });
  console.log("newNums2", newNums2); // [20, 40, 80, 100]

  // reduce函数的使用
  // reduce用于对数组中所有元素进行汇总
  let total = newNums2.reduce(function (preValue, n) {
    return preValue + n;
  }, 0);
  console.log("total", total);

  // 第一次回调：preValue：0    n：20
  // 第二次回调：preValue：20   n：40
  // 第三次回调：preValue：60   n：80
  // 第四次回调：preValue：140  n：100
  // total：240

  // 高阶写法 1
  let result = nums.filter(function (n) {
    return n < 100;
  }).map(function (n) {
    return n * 2;
  }).reduce(function (preValue, n) {
    return preValue + n;
  });

  console.log("result", result);

  // 高阶写法 2
  let sum = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n);
  console.log("sum", sum);
</script>
</body>
</html>